import { FormLabel, Grid2TypeMap, Typography, TypographyTypeMap } from '@mui/material';
import { DefaultComponentProps, OverridableTypeMap, OverrideProps } from '@mui/material/OverridableComponent';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
import React, { ReactNode } from 'react';
import Styles from './index.module.scss';

export interface LabelProps extends DefaultComponentProps<Grid2TypeMap> {
  label?: string | number | ReactNode;
  text?: string | number;
  suffix?: ReactNode;
  labelProps?: { component: React.ElementType } & OverrideProps<OverridableTypeMap, React.ElementType>;
  textProps?: DefaultComponentProps<TypographyTypeMap>;
  labelGrid?: DefaultComponentProps<Grid2TypeMap>;
  childrenGrid?: DefaultComponentProps<Grid2TypeMap>;
}

export const Label: React.FC<LabelProps> = ({
  label,
  text,
  suffix,
  labelProps,
  textProps,
  children,
  labelGrid,
  childrenGrid,
  ...props
}) => (
    <Grid2 container className={Styles.labelBar} {...props}>
      {!!label && (
        <Grid2 {...labelGrid}>
          <FormLabel className={Styles.label} {...labelProps}>
            {label}
          </FormLabel>
        </Grid2>
      )}
      {!children ? (
        <>
          <Typography className={Styles.text} {...textProps}>
            {text}
          </Typography>
          {suffix && suffix}
        </>
      ) : (
        <Grid2 {...childrenGrid}>{children}</Grid2>
      )}
    </Grid2>
);

export default Label;
